﻿@{Layout = null;}
@model MvcShopping.Models.Member
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="~/Content/amazeui.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/amazeui.min.js"></script>
    <link href="~/Content/regedit.css" rel="stylesheet" />
    <link href="~/Content/sui.css" rel="stylesheet" />
    <script src="~/Scripts/sui.js"></script>
    <script src="~/Scripts/PCASClass.js"></script>
    <title></title>
    <style>
        body {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -40px;
            bottom: -40px;
            width: auto;
            height: auto;
            background: url('../../images/city-wallpaper-18.jpg') no-repeat fixed;
            background-size: cover;
            background-position: 50%;
        }

        .bottomLine {
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding-top: 8px;
            /*padding-bottom:10px;*/
        }

        .bot {
            margin-bottom: 50px;
            /*text-align: center;*/
            color: #7b6f5b;
        }

        .radio-pretty.checked > span:before {
            color: #f88600;
        }

        input {
            height: 62px;
        }

        .am-g-1 {
            margin-top: 25px;
        }

        .radio-pretty span:before {
            margin-right: 2px;
            vertical-align: -4px;
            font-size: 20px;
            color: #bdbdbd;
            margin-left: -2px;
        }

        .myEmail {
            margin: auto;
            display: block;
            float: left;
            padding-left: 55px;
            width: 528px
        }

        .mySecond {
            margin: auto;
            display: block;
            float: left;
            padding-left: 59px;
            width: 100%
        }
    </style>
</head>
<body>
    <div class="am-g am-g-1">
        <div style="width: 999px;margin: 0 auto;font-size: 14px;">
            <span style="float: right;color: #333333;">我已注册，马上<span style="color: #F88600;">登录</span></span>
        </div>
    </div>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <div class="am-g content" style="margin-top: 12px;">
            <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
                <ul class="am-tabs-nav am-cf" style="margin-top: 34px;">
                    <li class="" style="max-width: 95px; margin-left: 100px;"></li>
                    <li class="am-active"><a href="[data-tab-panel-0]"><span class="am-badge am-round am-badge-warning-active " style="vertical-align: middle;margin-top:-4px;">1</span>设置登录名</a></li>
                    <li class=""><a href="[data-tab-panel-1]"><span class="am-badge  am-round" style="vertical-align: middle;margin-top:-4px;">2</span>设置用户信息</a></li>
                    <li class=""><a href="[data-tab-panel-2]"><span class="am-badge  am-round" style="vertical-align: middle;margin-top:-4px;">3</span>注册成功</a></li>
                    <li class="" style="max-width: 95px;margin-right: 100px;"></li>
                </ul>
                <div class="am-tabs-bd" style="margin-top: 19px;margin-left: -20px;">
                    <div data-tab-panel-0 class="am-tab-panel am-active">
                        <div class="am-g">
                            <div class="am-u-sm-7 am-u-sm-offset-3 ">
                                <span class="left1"></span>
                                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "myEmail am-form-field", placeholder = "请输入您的邮箱" } })
                            </div>
                            <div class="am-u-sm-1 am-u-end" style="padding: 10px;"> <span class="right" style="display: none;"></span> </div>
                        </div>
                        <div class="am-g" style="margin-top: 37px;">
                            <div class="am-u-sm-7 am-u-sm-offset-3 ">
                                <span class="left1"></span>
                                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "myEmail am-form-field", placeholder = "请输入您的密码" } })
                            </div>
                            <div class="am-u-sm-1 am-u-end" style="padding: 10px;">
                                <span class="right" style="display: none;"></span>
                            </div>
                        </div>

                        @*<div class="am-g" style="margin-top: 37px;">
        <div class="am-u-sm-7 am-u-sm-offset-3 ">
            <span class="left1"></span>
            <input type="password" placeholder="请再次输入您的密码" class="myEmail am-form-field" />
        </div>
        <div class="am-u-sm-1 am-u-end" style="padding: 10px;">
            <span class="right" style="display: none;"></span>
        </div>
    </div>*@
                        <div class="am-g" style="margin-top: 21px;">
                            <form class="sui-form">
                                <div class="am-u-sm-7 am-u-sm-offset-3" style="padding-right: 0rem;"><input type="checkbox" checked="checked" style="height:17px;margin-right:10px"><span style="font-size: 12px;color: #878787;">同意该站相关协议已特定权限获取</span></div>
                            </form>
                        </div>
                        <div class="am-g" style="margin-top:42px;">
                            <div class="am-u-sm-7 am-u-sm-offset-3 "> <button type="button" class="am-btn am-btn-warning firstBtn" style="width: 528px;padding: 20px;border: 1px rgba(187, 187, 187, 0.5) solid;"><font style="font-size: 20px;font-weight: bold;">同意协议并注册</font></button> </div>
                        </div>
                        <div class="am-g" style="margin-top: 15px;margin-bottom: 18px;">

                        </div>
                    </div>
                    <!--设置用户信息-->
                    <div data-tab-panel-1 class="am-tab-panel ">
                        <div class="am-g" style="margin-top:50px">
                            <div class="am-u-sm-6 am-u-sm-offset-3 ">
                                <span class="left3"></span>
                                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "mySecond", placeholder = "请输入您的中文姓名" } })
                            </div>
                        </div>
                        <div class="am-g" style="margin-top: 36px;">
                            <div class="am-u-sm-6 am-u-sm-offset-3 ">
                                <span class="left3"></span>
                                @Html.EditorFor(model => model.Nickname, new { htmlAttributes = new { @class = "mySecond", placeholder = "请输入您的网络昵称" } })
                            </div>
                        </div>
                        @*<div class="am-g" style="margin-top: 16px;">
                                <div class="am-u-sm-6 am-u-sm-offset-3 ">
                                    <span style="margin-left:12px;">
                                        是否有上级:<label data-toggle="radio" class="radio-pretty inline checked"> <input type="radio" checked="checked" name="radio1"><span>有</span></label>
                                        <label data-toggle="radio" class="radio-pretty inline" style="margin-left: 34px;"> <input type="radio" name="radio1"><span>无</span> </label>
                                </div>
                            </div>
                            <div class="am-g" style="margin-top: 16px;">
                                <div class="am-u-sm-6 am-u-sm-offset-3 "> <span class="left4"></span> <input type="text" placeholder="请输入您的上级" class="am-form-field" style="margin: auto;display: block;float: left;padding-left: 59px;width: 100%" /> </div>
                            </div>*@
                        <div class="am-g" style="margin-top: 68px;margin-bottom: 100px;">
                            <div class="am-u-sm-6 am-u-sm-offset-3 "> <button type="button" class="am-btn am-btn-warning" style="width: 100%;height: 62px;font-size: 20px;font-weight: bold;border: 1px rgba(187, 187, 187, 0.5) solid;">下一步</button> </div>
                        </div>
                    </div>

                    <!--成功-->
                    <div data-tab-panel-2 class="am-tab-panel ">
                        <div class="form-group" style="margin-top:50px;">
                            <label class="col-md-offset-1 col-md-2 control-label" for="keyword"></label>
                            <div class="col-md-7" style="margin-bottom:100px">
                                <div class="col-md-4" style="padding-left:0;">
                                    <select class="form-control" id="province6" name="province6"></select>
                                </div>
                                <div class="col-md-4">
                                    <select class="form-control" id="city6" name="city6"></select>
                                </div>
                                <div class="col-md-4">
                                    <select class="form-control" id="area6" name="area6"></select>
                                </div>
                                <input type="text" class="form-control" id="address" name="address" style="display:none">
                                @*<input type="text" class="form-control col-md-12" id="detailAddress" style="margin-top:20px;" />*@
                                <div class="am-g" style="margin-top: 66px;">
                                    <div class="" am-u-sm-7 am-u-sm-offset-3">
                                        <span class="left3"></span>
                                        <input type="text" class="mySecond" placeholder="请输入详细地址" />
                                    </div>
                                </div>

                            </div>
                            <div class="am-g" style="margin-bottom: 100px;">
                                <div class="am-u-sm-7 am-u-sm-offset-3 "> <input type="submit" value="确认" class="am-btn am-btn-warning" style="width: 100%;height: 62px;font-size: 20px;font-weight: bold;border: 1px rgba(187, 187, 187, 0.5) solid;"></div>
                            </div>
                        </div>
                    </div>
                    <script language="javascript" defer>
                        new PCAS("province6", "city6", "area6");
                    </script>
                </div>
            </div>
        </div>
    }
</body>
<script>
    $(document).ready(function () {
        $("select").change(function () {
            $("#address").val($("#province6").val() + $("#city6").val() + $("#area6").val() + $("#detailAddress").val());

        });
        //$(".am-btn-warning").click(function () {
        //    $(this).parents(".am-tab-panel").removeClass("am-active am-in");
        //    $(this).parents(".am-tab-panel").siblings(".am-tab-panel").addClass("am-active am-in");
        //});
        $("#detailAddress").change(function () {
            $("#address").val($("#province6").val() + $("#city6").val() + $("#area6").val() + $("#detailAddress").val());

        });
    });
</script>
</html>


@*<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Thirteen Shop</title>
        <script src="~/Scripts/jquery-3.2.1.js"></script>
        <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
                background: #fff;
                color: #fff;
                font-family: Arial;
                font-size: 12px;
            }



            .grad {
                position: absolute;
                top: -20px;
                left: -20px;
                right: -40px;
                bottom: -40px;
                width: auto;
                height: auto;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
                z-index: 1;
                opacity: 0.7;
            }

            .header {
                position: absolute;
                top: calc(50% - 35px);
                left: calc(50% - 255px);
                z-index: 2;
            }

                .header div {
                    float: left;
                    color: #fff;
                    font-family: 'Exo', sans-serif;
                    font-size: 35px;
                    font-weight: 200;
                }

                    .header div span {
                        color: #5379fa !important;
                    }

            .login {
                position: absolute;
                top: calc(50% - 200px);
                left: calc(50% - 130px);
                height: 400px;
                width: 260px;
                padding: 10px;
                z-index: 2;
            }

            .user {
                width: 250px;
                height: 30px;
                background: transparent;
                border: 1px solid rgba(255,255,255,0.6);
                border-radius: 2px;
                color: #fff;
                font-family: 'Exo', sans-serif;
                font-size: 16px;
                font-weight: 400;
                padding: 4px;
            }

            .paw {
                width: 250px;
                height: 30px;
                background: transparent;
                border: 1px solid rgba(255,255,255,0.6);
                border-radius: 2px;
                color: #fff;
                font-family: 'Exo', sans-serif;
                font-size: 16px;
                font-weight: 400;
                padding: 4px;
                margin-top: 10px;
            }

            #btn1 {
                position: center;
                width: 260px;
                height: 35px;
                background: #fff;
                border: 1px solid #fff;
                cursor: pointer;
                border-radius: 2px;
                color: darkgrey;
                font-family: 'Exo', sans-serif;
                font-size: 16px;
                font-weight: 400;
                padding: 6px;
                margin-top: 10px;
            }

                #btn1:hover {
                    opacity: 0.8;
                }

                #btn1:active {
                    opacity: 0.6;
                }

            .user:focus {
                outline: none;
                border: 1px solid rgba(255,255,255,0.9);
            }

            .paw:focus {
                outline: none;
                border: 1px solid rgba(255,255,255,0.9);
            }

            #btn1:focus {
                outline: none;
            }

            .my {
                position: center;
                width: 260px;
                height: 30px;
                border: 1px solid #fff;
                border-radius: 2px;
            }
        </style>

    </head>
    <body>
        <div class="body"></div>
        <div class="grad"></div>
        <br>
        <div class="login">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)


                <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                    <label style="font-size:large;color:white">邮箱</label>
                    <div>
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "my" } })
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>
                </div>

                <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                    <label style="font-size:large;color:white;">密码</label>
                    <div>
                        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "my" } })
                        @Html.ValidationMessageFor(model => model.Password)
                    </div>
                </div>

                                <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                                    <label style="font-size:large;color:white;">用户名</label>

                                    <div>
                                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "my" } })
                                        @Html.ValidationMessageFor(model => model.Name)
                                    </div>
                                </div>

                                <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                                    <label style="font-size:large;color:white;">网络昵称</label>

                                    <div>
                                        @Html.EditorFor(model => model.Nickname, new { htmlAttributes = new { @class = "my" } })
                                        @Html.ValidationMessageFor(model => model.Nickname)
                                    </div>
                                </div>

                                <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                                    <label style="font-size:large;color:white;">收货地址</label>

                                    <div>
                                        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "my" } })
                                        @Html.ValidationMessageFor(model => model.Address)
                                    </div>
                                </div>

                                <p>
                                    <button type="submit" id="btn1">注册</button>

                                </p>

            }



        </div>



        @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
        }
    </body>

    </html>*@